<template>
  <view>
    <view class="top">
      <div class="mask"></div>
    </view>

    <view class="card">
      <view class="flex-row justify-between">
        <image class="pic" src="https://picsum.photos/id/319/200/200"></image>
        <view class="flex-col" style="width: 510rpx;">
          <view class="name u-line-1">仟吉KenGee(宝龙店)</view>
          <view class="flex-row justify-between u-p-t-12">
            <image src="../../static/icons/weizhi2.png" style="width: 40rpx;flex-shrink: 0;" mode="widthFix"></image>
            <view class="address u-line-2">郑州市郑东新区农业东路33号2号楼号楼1层0491层049号</view>
          </view>
          
          <view class="flex-row align-center">
            <image src="../../static/icons/sj.png" style="width: 40rpx;flex-shrink: 0" mode="widthFix"></image>
            <view class="u-p-r-16">配送约30分钟</view>
            <image src="../../static/icons/yysj.png" style="width: 40rpx;flex-shrink: 0" mode="widthFix"></image>
            <view class="u-p-r-16">08:00--18:00</view>
          </view>
        </view>
      </view>
      <view class="tags">
        <u-tag class="tag" text="VIP享9折" color="#FFB849" border-color="#FFB849" mode="plain" size="mini" />
        <u-tag class="tag" text="VIP享9折" color="#FFB849" border-color="#FFB849" mode="plain" size="mini" />
        <u-tag class="tag" text="VIP享9折" color="#FFB849" border-color="#FFB849" mode="plain" size="mini" />
      </view>
      
      <view class="flex-row align-center u-p-t-24">
        <image src="../../static/icons/ggt.png" style="width: 40rpx;flex-shrink: 0;margin-right: 12rpx;" mode="widthFix"></image>
        <view class="u-line-1 u-font-24" style="color: #999999;">今日进店消费满300元可获得一次免费抽奖机会...</view>
      </view>
    </view>

    <view class="btns u-p-32">
      <view class="btn" @click="$goto('/pages/shop/quhao')">
        <image src="../../static/icons/quhao.png" mode=""></image>
        <view class="text">店内取号</view>
      </view>
      <view class="btn" @click="$goto('/pages/shop/yuyue')">
        <image src="../../static/icons/yuding.png" mode=""></image>
        <view class="text">店内预约</view>
      </view>
      <view class="btn">
        <image src="../../static/icons/youhuiquan.png" mode=""></image>
        <view class="text">优惠券</view>
      </view>
      <view class="btn">
        <image src="../../static/icons/dianneihuodong.png" mode=""></image>
        <view class="text">店内活动</view>
      </view>
    </view>

    <u-tabs :list="tabs" :is-scroll="true" active-color="#ffb849" :current="current" @change="change"></u-tabs>
    
    <view class="main">
      <shangpin v-model="goodList" v-show="current == 0"></shangpin>
      
      <pingjia v-show="current == 1"></pingjia>
      
      <shangjia v-show="current == 2"></shangjia>
    </view>
  </view>
</template>

<script>
  import cell from './components/cell.vue'
  import shangpin from './components/shangpin.vue'
  import pingjia from './components/pingjia.vue'
  import shangjia from './components/shangjia.vue'
  export default {
    components: {
      cell,
      shangpin,
      pingjia,
      shangjia
    },
    data() {
      return {
        tabs: [{
            name: '商品'
          },
          {
            name: '评价'
          },
          {
            name: '商家'
          }
        ],
        current: 0,
        goodList: [{
            name: '饮料',
            count: 0,
            foods: [{
                name: '可乐',
                key: '可乐',
                icon: 'https://cdn.uviewui.com/uview/common/classify/1/1.jpg',
                count: 0
              },
              {
                name: '雪碧',
                key: '雪碧',
                icon: 'https://cdn.uviewui.com/uview/common/classify/1/1.jpg',
                count: 0
              },
              {
                name: '加多宝',
                key: '加多宝',
                icon: 'https://cdn.uviewui.com/uview/common/classify/1/1.jpg',
                count: 0
              }
            ]
          },
          {
            name: '零食',
            count: 0,
            foods: [{
                name: '可乐',
                key: '可乐',
                icon: 'https://cdn.uviewui.com/uview/common/classify/1/1.jpg',
                count: 0
              },
              {
                name: '雪碧',
                key: '雪碧',
                icon: 'https://cdn.uviewui.com/uview/common/classify/1/1.jpg',
                count: 0
              }
            ]
          }
        ]
      };
    },
    computed: {
      
    },
    methods: {
      change(index) {
        this.current = index;
      },
    }
  }
</script>

<style lang="scss">
  .u-cell {
    padding: 16rpx 32rpx !important;
  }
  
  .top {
    width: 750rpx;
    height: 320rpx;
    background: url('https://picsum.photos/id/315/300/300') center / cover;

    .mask {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.2);
    }
  }

  .card {
    width: 702rpx;
    // height: 346rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    margin: -160rpx auto 0 auto;
    padding: 24rpx;

    .pic {
      width: 122rpx;
      height: 122rpx;
      background: #004714;
      border-radius: 8px;
    }

    .name {
      font-size: 34rpx;
    }

    .address {
      color: #999999;
      font-size: 22rpx;
    }

    .tag {
      margin: 16rpx 16rpx 0 0;
    }
  }

  .btns {
    display: flex;
    justify-content: space-around;

    .btn {
      width: 140rpx;
      height: 140rpx;
      background: #FFFFFF;
      box-shadow: 3rpx 3rpx 16rpx 2rpx rgba(161, 169, 173, 0.1);
      border-radius: 12rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;

      image {
        width: 60rpx;
        height: 60rpx;
      }

      .text {
        padding-top: 8rpx;
      }
    }
  }

</style>
